<template>
  <div class="p-4">
    <div class="max-w-sm rounded-lg overflow-hidden shadow-lg mb-4">
      <img class="w-full" src="https://tailwindcss.com/img/card-top.jpg" alt="Sunset in the mountains" />
      <div class="px-6 py-4 pb-2">
        <div class="font-normal text-xl mb-2">The Coldest Sunset</div>
        <p class="text-gray-700 text-base">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
          quia, nulla! Maiores et perferendis eaque, exercitationem praesentium
          nihil.
        </p>
      </div>
      <div class="px-6 py-4">
        <span class="badge mr-2">#photography</span>
        <span class="badge mr-2">#travel</span>
        <span class="badge">#winter</span>
      </div>
    </div>
  </div>

  <div class="flex max-w-sm px-8 py-8 m-auto bg-white shadow-lg rounded-3xl items-center space-x-5">
    <div class="shrink-0">
      <img src="/public/favicon.ico" class="size-12" alt="">
    </div>
    <div>
      <div class="text-xl text-black   font-medium">ChitChat</div>
      <p class="text-slate-500">You have a new message!</p>
      <button class=" border-4 border-purple-400 px-2 bg-red-100 focus:bg-slate-600">button</button>
      <button class="px-3 py-1 text-purple-400 border rounded-full  border-pink-300 hover:bg-red-300">Message</button>
    </div>
  </div>
</template>

<style lang="postcss" scoped>
.badge {
  @apply inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700;

  &:hover {
    @apply bg-gray-300;
  }
}
</style>